import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/home/HomeView.vue'
import Kind from '@/views/kind/index.vue'
import Cart from '@/views/cart/index.vue'
import User from '@/views/user/index.vue'
const routes = [
    {
      path: '/',
      //路由重定向
      redirect:'/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      // 路由的元信息
      //用来判断是否显示footer
      meta:{
        show:true,
        title:'首页'
      },
      // 独享守卫
      beforeEachL:(to:any,from:any)=>{
        console.log('进入首页');
        
      }
    },
    {
      path: '/kind',
      name: 'kind',
      component: Kind,
      meta:{show:true,
        title:'分类'}
    },
    {
      path: '/cart',
      name: 'cart',
      component: Cart,
      meta:{show:true,
        title:'购物车'}
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      meta:{show:true,
        title:'我的'}
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login/index.vue'),
      meta:{
        title:'登录'}
    },
    {
      path: '/register',
      name: 'register',
      meta:{
        title:'注册'},
      component: () => import('../views/register/index.vue'),
      redirect:'/register/step1',
      children:[
        {
        path:'step1',
        name:'step1',
        component:()=>import('../views/register/step1.vue')
       },
        {
        path:'step2',
        name:'step2',
        component:()=>import('../views/register/step2.vue')
       },
        {
        path:'step3',
        name:'step3',
        component:()=>import('../views/register/step3.vue')
       },
      ]
    },
    {
      path: '/prodetail/:proid',
      name: '/prodetail',
      component: () => import('@/views/prodetail/index.vue'),
      meta:{
        title:'商品详情'}
    },

    //将匹配所有内容并将其放在'Sroute.params.pathMatch'下
    {
      path:'/:pathMath(.*)*',
      name:'NotFound',
      component:()=>import('../views/error/index.vue')
    }
  ]
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
  })


  // ---------------------------路由守卫---------------
  /*
  1、全局守卫
  前置守卫
  beforeEach:全局前置守卫:可以做路由权限验证，该守卫会在页面跳转之前执行
  解析守卫
  beforeResolve:和前置类似，但调用时机不同，在前置之后调用，在导航确认之前，所有组件内守卫和异步路由组件被解析之后调用，可以访问到自定义 meta 属性
  后置守卫
  afterEach:全局后置首位,在跳转页面之后执行


  2、独享首位
  某个页面专用的守卫，只针对于当前路由

  3、组件内的守卫
  beforeRouteEnter:在渲染该组件的对应路由被验证前调用，不能获取组件实例(组合式API中没有 )
  beforeRouteUperdate：在当前路由改变，但是该组件被复用时调用，即当该路由有二级路由时切换二级路由时调用
  beforeRouteLeave：在导航离开渲染该组件的对应路由时调用，离开该路由时调用
  */


  // 路由的全局前置守卫
  router.beforeEach((to, from,next) => {
    // ...
    // 返回 false 以取消导航
    // return false
    
    //在进入购物车前先进行判断
    if(to.path=='/cart'){
      //验证用户是否登录
      const loginState=localStorage.getItem('loginState')=='true'
      if(loginState==false){
        //进入登录页面
        next({
          name:'login'
        })
      }else{
        next()
      }

    }else{
      next()
    }

  })


  router.afterEach((to,from)=>{
    // document.querySelector('title').innerText=to.meta.title
    document.title=to.meta.title as string
  })
export default router
